//
// Dropdown menus
// --------------------------------------------------


// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.sui-dropup,
.sui-dropdown {
  position: relative;
  display: inline-block;
  .dropdown-toggle {
    // The caret makes the toggle a bit too tall in IE7
    *margin-bottom: -3px;
  }
  .dropdown-inner {
    > a {
      text-decoration: none;
    }
  
    > .sui-dropdown-menu {
      top: 0;
      left: 0;
      margin: 0; // override default ul
      padding-top: 24px;
      z-index: 9;
    }
  }
  .sui-dropdown-menu {
    display: none;
    position: absolute;
    z-index: @zindexDropdown;
  }
  .dropdown-submenu {
    position: relative;
    > .sui-dropdown-menu {
      top: 0;
      left: 100%;
    }
    &:hover {
      > .sui-dropdown-menu {
        display: block;
      }
    }
    > a {
      .sui-icon {
        font-size: 120%;
      }
    }
  }

  &.open {
    .dropdown-inner > .sui-dropdown-menu,
    > .sui-dropdown-menu
    {
      display: block;
    }
    .dropdown-toggle {
      outline: 0;
    }

  }
    
  a {
    outline: 0;
    > .sui-icon {
      float: right;
    }
  }

// Place the caret
  .caret {
    .sui-icon;
    font-size: 120%;
    &:before {
      content: "\e6eb";
    }
  }

  &.dropdown-bordered {
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    vertical-align: middle;
    display: inline-block;
    padding: 0;
    .dropdown-inner {
      border: 1px solid @dropdownBorder;
      display: inline-block;
      .border-radius(2px);
      a {
        color: #666;
        min-width: 82px;  //总宽度100px
        display: inline-block;
        padding: @basePadding;
        padding-left: 8px;
        padding-right: 8px;
      }
      .caret {
        float: right;
        margin-left: 4px;
      }

      > .sui-dropdown-menu {
        margin: 0;
        width: 100%;
        .box-sizing(border-box);
      }
    }
  }
  &.open {
    .dropdown-inner {
      border-color: @dropdownOpenColor;
      > a > .caret {
        color: @dropdownOpenColor;
      }
      > a {
        position: relative;
        z-index: 10;
        border-bottom: 1px solid @dropdownBorder;
      }
    }
  }
}

// The dropdown menu (ul) 
// 这个是可以独立使用的
// ----------------------
.sui-dropdown-menu {
  display: inline-block; 
  padding: 1px 0;
  min-width: 100px;
  list-style: none;
  background-color: @dropdownBackground;
  border: 1px solid @dropdownBorder;
  .border-radius(2px);
  .box-shadow(0 0px 2px 2px rgba(0,0,0,.1));
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;

  // Aligns the dropdown menu to right
  &.pull-right {
    right: 0;
    left: auto;
  }

  // Dividers (basically an hr) within the dropdown
  .divider {
    .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
    margin: 5px 1px;
  }

  // Links within the dropdown menu
  > li {
    padding: 0 1px; //这里通过li左右padding而不是容器的，因为多级菜单要用li的hover状态来控制，必须让li占据更多宽度
    a {
      display: block;
      padding: 3px 10px;
      clear: both;
      font-weight: normal;
      line-height: @baseLineHeight;
      color: @dropdownLinkColor;
      white-space: nowrap;
      
      &:focus {
        outline: none;
      }
    }
    &:hover > a,
    .active > a
    {
      color: #fff;
    }
  }
}

// Hover/Focus state
// -----------
.sui-dropdown-menu > li > a:hover,
.sui-dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  text-decoration: none;
  color: @dropdownLinkColorHover;
  background-color: lighten(@dropdownLinkBackgroundActive, 5%);
}

// Active state
// ------------
.sui-dropdown-menu {
  > .active  a {
    &, &:hover, &:focus {
      color: @dropdownLinkColorActive;
      text-decoration: none;
      outline: 0;
      background-color: @dropdownLinkBackgroundActive;
    }
  }

// Disabled state
// --------------
// Gray out text and ensure the hover/focus state remains gray
  > .disabled > a {
    &, &:hover, &:focus {
      color: @grayLight;
    }
  }
// Nuke hover/focus effects
  > .disabled > a {
    &:hover, &:focus {
      text-decoration: none;
      background-color: transparent;
      background-image: none; // Remove CSS gradient
      .reset-filter();
      cursor: default;
    }
  }
}

// Open state for the dropdown
// ---------------------------


// Backdrop to catch body clicks on mobile, etc.
// ---------------------------
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: @zindexDropdown - 10;
}

// different size
.sui-dropdown.dropdown-bordered {
  // xLarge
  &.dropdown-xlarge {
    &.open > .dropdown-inner > .sui-dropdown-menu {
      padding-top: 32px;
    }
    > .dropdown-inner  a {
      padding: @paddingXLarge;
      line-height: @lineHeightLarge;
      font-size: @fontSizeLarge;
    }
  }

  // Large
  &.dropdown-large {
    &.open > .dropdown-inner > .sui-dropdown-menu {
      padding-top: 28px;
    }
    > .dropdown-inner a {
      padding: @paddingLarge;
      line-height: @lineHeightLarge;
      font-size: @fontSizeLarge;
    }
  }

  // Small
  &.dropdown-small {
    &.open > .dropdown-inner > .sui-dropdown-menu {
      padding-top: 20px;
    }
    > .dropdown-inner a {
      padding: @paddingSmall;
      line-height: @lineHeightSmall;
      font-size: @fontSizeSmall;
    }
  }
  &,
  &.dropdown-xlarge,
  &.dropdown-large,
  &.dropdown-small {
    > .dropdown-inner {
      a {
        padding-left: 8px;
        padding-right: 8px;
      }
      > .sui-dropdown-menu {
        a {
          width: 100%;
          .box-sizing(border-box);
          color: @dropdownLinkColor;
        }
        li:hover > a,
        li.active > a
        {
          color: #fff;
        }
      }
    }
  }
}


// Right aligned dropdowns
// ---------------------------
.pull-right > .sui-dropdown-menu {
  right: 0;
  left: auto;
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.sui-dropup,
.navbar-fixed-bottom .sui-dropdown {
  // Reverse the caret
  .caret {
    border-top: 0;
    border-bottom: 4px solid @black;
    content: "";
  }
  // Different positioning for bottom up menu
  .sui-dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
  }
}

// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
.sui-dropdown .sui-dropdown-menu .nav-header {
  padding-left: 20px;
  padding-right: 20px;
}

// Typeahead
// ---------
.sui-typeahead {
  z-index: 1051;
  margin-top: 2px; // give it some space to breathe
  .border-radius(@baseBorderRadius);
}
